<breadcrumb></breadcrumb>

<mat-card>
  <section>
    <h2>Continuous slider (e.g. color component sliders)</h2>
    <p>Move the red, green, and blue sliders to choose a color.</p>
    <div class="demo-color-container">
      <div class="demo-color-sliders">
        <div>
          <label class="demo-color-label" for="r-slider">Red</label>
          <mat-slider aria-label="Red" id="r-slider" min="0" max="255" [(ngModel)]="red">
          </mat-slider>
        </div>
        <div>
          <label class="demo-color-label" for="g-slider">Green</label>
          <mat-slider aria-label="Green" id="g-slider" min="0" max="255" [(ngModel)]="green">
          </mat-slider>
        </div>
        <div>
          <label class="demo-color-label" for="b-slider">Blue</label>
          <mat-slider aria-label="Blue" id="b-slider" min="0" max="255" [(ngModel)]="blue">
          </mat-slider>
        </div>
      </div>
      <div class="demo-color-swatch" [style.background]="swatchBackground"></div>
    </div>
  </section>

  <section>
    <h2>Discrete slider (e.g. rate a product)</h2>
    <p>Please rate our product on a scale of 1 (not satisfied) to 5 (extremely satisfied).</p>
    <mat-slider min="1" max="5" tickInterval="1" thumbLabel aria-label="Rating"></mat-slider>
  </section>

  <section>
    <h2>Vertical slider (e.g. volume control)</h2>
    <p>Use the slider to adjust the volume.</p>
    <div class="demo-volume-container">
      <label for="vol-slider">
        <mat-icon aria-hidden>volume_up</mat-icon>
        <span class="cdk-visually-hidden">Volume</span>
      </label>
      <mat-slider aria-label="Volume" id="vol-slider" min="0" max="100" vertical inverted>
      </mat-slider>
    </div>
  </section>
</mat-card>